<template>
  <f7-page>
    <f7-navbar title="吉林动画学院红头文件申请表" ></f7-navbar>

    <f7-list inline-labels no-hairlines-md>
      <f7-list-item>
        <f7-label>名称</f7-label>
        <f7-input type="text" :value="formContent.title" @input="formContent.title = $event.target.value"></f7-input>
      </f7-list-item>
      <f7-list-item  >
        <f7-label>申请部门</f7-label>
        <f7-input type="select" placeholder="Please choose..." :value="formContent.orgName"
                  @input="formContent.orgName = $event.target.value">
          <option  v-for="item in orgNames" v-bind:key="item.id" v-bind:value="item.name" >{{item.name}}</option>
        </f7-input>
      </f7-list-item>
      <f7-list-item >
        <f7-label>文号类型</f7-label>
        <f7-input type="select" placeholder="Please choose..."   :value="formContent.docType" @input="formContent.docType = $event.target.value">
          <option v-for="(value, index) in issueNum" v-bind:key="index" v-bind:value="index" >{{value}}</option>

        </f7-input>
      </f7-list-item>
      <f7-list-item >
        <f7-label>发文内容</f7-label>
        <f7-input type="textarea" placeholder="Input here please" :value="formContent.docContent" @input="formContent.docContent = $event.target.value"></f7-input>
      </f7-list-item>
      <f7-list-item >
        <f7-label>需要审批</f7-label>
        <f7-toggle color="orange"  :checked="formContent.needHeader" @change="checkTaggle"></f7-toggle>
      </f7-list-item>
    </f7-list>


    <f7-list key="superiors" v-show="formContent.needHeader" form>
      <f7-block-title>校领导审批名单</f7-block-title>
      <f7-list-item v-for="(item, idx) in items" :key="idx" checkbox name="superiorApply" :value="item" :title="item"
                    @change="checkSuperior" :checked="formContent.needManagerUser.includes(item)"></f7-list-item>
    </f7-list>

    <f7-block strong>
      <f7-row>
        <f7-col width="50">
          <f7-button fill raised  @click="submitApply">提交</f7-button>
        </f7-col>
        <f7-col width="50">
          <f7-button fill raised back>取消</f7-button>
        </f7-col>
      </f7-row>
    </f7-block>



  </f7-page>
</template>

<script>
  export default {
    name: "applyRedHeadTable",
    data() {
      return {
        items: [],
        issueNum: this.GLOBAL.issueWord,
        orgNames: this.GLOBAL.orgNames,
        pastMemory: {},
        formContent: {
          applyDate: "",
          auditResult: "流程尚未启动",
          businessNo: "",
          chairmanUser: "",
          creationDate: "",
          currentNode: "",
          depUser: "",
          docStatus: "",
          editDocType: true,
          managerUser: "",
          processInstanceId: "",
          schoolUser: "",
          status: 0,
          title: "吉林动画学院红头文件申请表",
          docType: 1,
          createBy: sessionStorage.getItem('userName'),
          orgName: "动画工程中心",
          orgId: 0,
          docContent: "",
          needHeader: true,
          needManagerUser: "",
        }
      }
    },
    created() {
      this.$f7ready((f7)=> {
        let that = this;
        f7.request.setup({
          headers: {
            'AccessToken': sessionStorage.getItem('accessToken'),
            'JSESSIONID': sessionStorage.getItem('userToken'),
          }
        });
        f7.request.json(that.GLOBAL.RequestAddress + '/camel/rest/dutys/104954/users/loginnames', { }, function (result) {
          if (result.success === undefined) {
            that.items = result;
          }
        });
        f7.request.json(that.GLOBAL.RequestAddress + '/camel/rest/redheadapplys', {
          'page': 1,
          'limit': 10,
          'jsonStr': '',
          'otherStr': '',
          'start': '0'
        }, function (result) {
          if (result.success === undefined) {
            for(let pm of result.data) {
              if(pm.id == that.$f7route.params.id) {
                that.pastMemory = pm;
                break;
              }
            }
            if(Object.keys(that.pastMemory).length === 0){
              return;
            } else {
              that.formContent.title = that.pastMemory.title;
              that.formContent.docType = that.pastMemory.docType;
              that.formContent.orgName = that.pastMemory.orgName;
              that.formContent.orgId = that.pastMemory.orgId;
              that.formContent.docContent = that.pastMemory.docContent;
              that.formContent.needHeader = that.pastMemory.needHeader;
              that.formContent.needManagerUser = that.pastMemory.needManagerUser;
            }
  ;
          }
        })
      });
    },
    watch: {
      // $route (to,from){
      //   // to表示的是你要去的那个组件，from 表示的是你从哪个组件过来的，它们是两个对
      //   // 象，你可以把它打印出来，它们也有一个param 属性
      //   console.log(to);
      //   console.log(from);
      //   this.dynamicSegment = to.params.id
      // }
    },
    methods: {
      submitApply: function(event) {
        let that = this;
        let ff = that.formContent;
        let app = that.$f7

        if(that.checkValidate() == false) {
          return
        }
        that.findIDFromOrgName(that.formContent.orgName);
        if(Object.keys(that.pastMemory).length === 0) {
          app.request.postJSON(that.GLOBAL.RequestAddress + '/camel/rest/redheadapplys', ff, function (result) {
            that.showAlert("提示", result.msg)
          });
        } else {
          ff.id = that.pastMemory.id;
          let url = that.GLOBAL.RequestAddress + '/camel/rest/redheadapplys/'+that.pastMemory.id
          that.putRequest(url, ff);
        }
      },
      checkSuperior(event) {
        let self = this;
        let value = event.target.value;
        if (event.target.checked) {
          if(self.formContent.needManagerUser.length == 0) {
            self.formContent.needManagerUser = value;
          } else {
            if(!self.formContent.needManagerUser.includes(value)) {
              self.formContent.needManagerUser = self.formContent.needManagerUser + "," + value;
            }
          }
        } else {
          let names = self.formContent.needManagerUser.split(',');
          names.splice(names.findIndex(v => v === value), 1);
          self.formContent.needManagerUser = names.join(',');
        }

      },
      checkTaggle(event) {
        const self = this;
        const value = event.target.checked;
        self.formContent.needHeader = value;
        if(value == false) {
          self.formContent.needManagerUser = "";
        }
      },
      showAlert: function (title, text) {
        let that = this;
        let app = that.$f7;
        app.dialog.alert(text, title, () => {
          that.$f7router.back();
        });
      },
      putRequest: function (url, cargo) {
        let that = this;
        fetch(url,
          {method: "put",
            headers: {
              "Content-Type": "application/json;charset=UTF-8",
              'AccessToken': sessionStorage.getItem('accessToken'),
              'JSESSIONID': sessionStorage.getItem('userToken'),
            },
            body: JSON.stringify(cargo)
          }).then (response => response.json())
          .then(  result => {
            console.log(result)
            that.showAlert("提示", result.msg)
          }).catch(function(err){
          console.log("Fetch错误",err)
        });
      },
      findIDFromOrgName: function (name) {
        let that = this;
        for(let item of that.orgNames) {
          if(item.name.localeCompare(name) == 0){
            that.formContent.orgId = item.id;
            that.formContent.orgName = item.name;
            break;
          }
        }
        return;
      },
      checkValidate: function () {
        let that = this;
        let app = that.$f7;
        if(that.formContent.docContent.length < 1) {
          app.dialog.alert("请填写发文内容", "提示", null);   return false
        }
        return true;
      }
    },


  }
</script>

<style scoped>

</style>
